import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Table,Input,Button ,Modal,Row,Col,message,Select,Popconfirm,Divider,Pagination,DatePicker,Radio,Checkbox,Icon } from 'antd';
import styles from './index.less';
import UPpdatefire from './upfile';
const {Option ,OptGroup} = Select;
const RadioGroup = Radio.Group;
const CheckboxGroup = Checkbox.Group;

import moment from 'moment';
import {TimeSpan} from '../../utils';
const Pages = ({ emplan, dispatch, loading }) => {
    const columns = [
        {
            title: '预案名称',
            dataIndex: 'pre_name',
        },
        {
            title: '预案类别',
            dataIndex: 'pre_type',
            render:text => text && text == 0?'综合应急预案':text == 1? '专项应急预案':'现场处置预案',
        },
        {
            title: '签发⼈',
            dataIndex: 'user_name',
        },
        {
            title: '签发日期',
            dataIndex: 'iss_time',
            render:text => text && TimeSpan(text).substring(0,text.length),
        },
        {
            title: '负责角色',
            dataIndex: 'department_name',
        },
        {
            title: '附件',
            dataIndex: 'doc_name',
            render:(text,record) => <a onClick={()=>{
                window.open(record.doc_url);
            }}>{text.substring(0,10)}...</a>,
        },
        {
            title: '操作',
            dataIndex: 'option',
            render: (text,record) =><div>
                <Popconfirm title="确定移除?" onCancel={()=>{}} onConfirm={
                    ()=> dispatch({type:"emplan/deleteEmplan",payload:{id:record.id}})
                } okText="是" cancelText="否">
                    <a style={{color:"red"}}>删除</a>
                </Popconfirm>
                <Divider type="vertical" />
                <a onClick={()=>{
                    dispatch({type:"emplan/save",payload:{record:record,view:true}});
                    dispatch({type:"emplan/newPost"});
                }}>修改</a>
                <Divider type="vertical" />
                <a onClick={()=>{
                    dispatch({type:'emplan/save',payload:{arrOneView:false}});
                    localStorage.setItem('id',record.id);
                    dispatch({type:'app/goToPath',payload:'Emergencyplan_list'});
                }}>详情</a>
            </div>,
        },
    ];

    const rowSelection = {
        type:'radio',
        selectedRowKeys:emplan.selectedRowKeys,
        onChange: (selectedRowKeys) => {
            dispatch({type:"emplan/save",payload:{selectedRowKeys:selectedRowKeys}});
        },
    };
    return(
        <div className={styles.container}>
            <PagesGET dispatch={dispatch} {...emplan} loading={loading.global}/>
            <Table columns={columns}
                rowSelection={rowSelection}
                size="small"
                loading={loading.global}
                rowKey={id => id.id}
                pagination={false}
                dataSource={emplan.getEmplanData|| null} />
            <Pagination current={emplan.pages} showTotal={total => `共计 ${total} 条`}
                style={{float: 'right', margin: 10}} size="small" total={emplan.total}
                onChange={pages => { !loading.global && dispatch({type:'emplan/save',payload:{pages:pages}});}}/>
        </div>
    );
};

class PagesGET extends React.Component {


    constructor (props) {
        super(props);
        this.state = {
            pre_name : '',
            pre_type : '',
            department_id: '',
            doc_url :'',
            off_no:"",
            pre_nameADD:'',
            pre_scope:'',
            pre_typeADD:'',
            pre_version:"",
            user_id:'',
            fileListfire:[],
            iss_time:'',
            descr:'',
            view_1:false,
            arrOne:[],
            arrTow:[],

        };
    }

    // 实例化生命周期函数1
    componentWillMount () {
        //判断是否登录
        this.props.dispatch({type:"emplan/getEmplan",payload:{
            pre_name : '',
            pre_type : '',
            pageNumber :1,
            pageSize :10,
        }});
        // this.timeoutId = setInterval(()=>console.log('执行了'),1000)
    }
    //角色树
    menuTreeOneFunRole (arr){
        return arr.map(item =>{
            if((item.orgList && item.orgList.length > 0) || (item.roleList && item.roleList.length > 0)){
                return <OptGroup key={item.id} label={item.s_name}>
                    {this.menuTreeOneFunRole(item.roleList)}{this.menuTreeOneFunRole(item.orgList)}
                </OptGroup>;
            }
            return <Option disabled={item.rolr_name?false:true}
                key={item.id} value={item.id}>{item.s_name || item.rolr_name}</Option>;
        });
    }
    render (){

        let { pages,record,view ,dispatch,BM,TXL,loading,selectedRowKeys} = this.props;
        let {arrOne,arrTow,view_1} = this.state;
        return (
            <div className={styles.containerit}>
                <Button style={{margin:'10px 10px 0 10px'}} onClick={()=>{
                    if (selectedRowKeys){
                        this.props.dispatch({type:'emplan/save',payload:{arrOneView:true}});
                        this.props.dispatch({type:'emplan/goList',payload:{id:selectedRowKeys[0]}});

                        this.setState({
                            RadioAdd:'',
                            CheckboxAdd:'',
                        });

                    }else {
                        message.error('您还未选择预案！');
                    }
                }} type='primary'>启动预案</Button>
                <br/>
                <Input value={this.state.pre_name } placeholder="预案名称" style={{margin:10,width:256}}
                    onChange={e=>this.setState({pre_name:e.target.value})}/>
                <Select value={this.state.pre_type || undefined} placeholder="预案类别" style={{margin:10,width:256}}
                    onChange={value=>{
                        this.setState({
                            pre_type:value,
                        });
                    }}>
                    <Option value=''>全部</Option>
                    <Option value='0'>综合应急预案</Option>
                    <Option value='1'>专项应急预案</Option>
                    <Option value='2'>现场处置预案</Option>
                </Select>
                <Button type='primary' style={{margin:10}} onClick={()=>{
                    let {pre_name,pre_type} = this.state;
                    this.props.dispatch({type:"emplan/getEmplan",payload:{
                        pre_name : pre_name,
                        pre_type : pre_type,
                        pageNumber :pages,
                        pageSize :10,
                    }});
                }
                }>查询</Button>
                <Button onClick={()=>{
                    this.setState({
                        pre_name : '',
                        pre_type : '',
                    });
                }
                }>重置</Button>
                <Button style={{margin:10}} onClick={()=>{
                    dispatch({type:"emplan/save",payload:{view:true,record:{}}});
                    dispatch({type:"emplan/newPost"});
                    this.setState({
                        department_id: '',
                        doc_url :'',
                        off_no:"",
                        pre_nameADD:'',
                        pre_scope:'',
                        pre_typeADD:'',
                        pre_version:"",
                        user_id:'',
                        fileListfire:[],
                        iss_time:'',
                        descr:'',
                    });
                }}>新增预案</Button>
                <Modal
                    title={record.id?"修改预案":"添加预案"}
                    visible={view}
                    confirmLoading={loading}
                    onOk={()=>{
                        let {department_id,doc_url,off_no,pre_nameADD,pre_scope,pre_typeADD,pre_version,user_id,descr,iss_time} =this.state;
                        if(department_id && doc_url && pre_nameADD && pre_typeADD){
                            // let pics =[];
                            // picture && picture.map(item =>{
                            //     pics.push(item.response.data);
                            // });
                            let body ={
                                department_id: department_id,
                                doc_url :doc_url,
                                iss_time:iss_time,
                                off_no:off_no,
                                pre_name:pre_nameADD,
                                pre_scope:pre_scope,
                                pre_type:pre_typeADD,
                                pre_version:pre_version,
                                user_id:user_id,
                                descr:descr,
                            };
                            if(record.id){
                                body.id = record.id;
                                dispatch({type:"emplan/putEmplan",payload:body});
                            }else{
                                dispatch({type:"emplan/postEmplan",payload:body});
                            }

                        }else{
                            message.error('请填写完整！');
                        }
                    }}
                    onCancel={()=>{
                        dispatch({type:"emplan/save",payload:{view:false,record:{}}});
                    }}>
                    <Row>

                        <Col span={6}><span><span style={{color:'red'}}>*</span>负责角色:</span></Col>
                        <Col span={14}>
                            <Select value={this.state.department_id || '请选择'} style={{ width: 300, marginBottom: 10, marginTop: -4 }}
                                onChange={value=>{
                                    this.setState({
                                        department_id:value,
                                    });
                                }}>
                                {
                                    BM && this.menuTreeOneFunRole(BM)
                                }
                            </Select>
                        </Col>
                        <Col span={6}><span><span style={{color:'red'}}>*</span>预案名称:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 300, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({pre_nameADD: e.target.value})}
                                value={this.state.pre_nameADD}
                                placeholder="预案名称"/>
                        </Col>
                        <Col span={6}><span><span style={{color:'red'}}>*</span>预案类别:</span></Col>
                        <Col span={14}>
                            <Select value={this.state.pre_typeADD || '请选择'} style={{ width: 300, marginBottom: 10, marginTop: -4 }}
                                onChange={value=>{
                                    this.setState({
                                        pre_typeADD:value,
                                    });
                                }}>
                                <Option value='0'>综合应急预案</Option>
                                <Option value='1'>专项应急预案</Option>
                                <Option value='2'>现场处置预案</Option>
                            </Select>
                        </Col>

                        <Col span={6}><span>公文号:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 300, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({off_no: e.target.value})}
                                value={this.state.off_no}
                                placeholder="公文号"/>
                        </Col>

                        <Col span={6}><span>适用范围:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 300, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({pre_scope: e.target.value})}
                                value={this.state.pre_scope}
                                placeholder="适用范围"/>
                        </Col>
                        <Col span={6}><span>版本号:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 300, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({pre_version: e.target.value})}
                                value={this.state.pre_version}
                                placeholder="版本号"/>
                        </Col>


                        <Col span={6}><span>签发人:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 300, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({user_id: e.target.value})}
                                value={this.state.user_id}
                                placeholder="请输入签发人"/>
                        </Col>
                        <Col span={6}><span>签发日期:</span></Col>
                        <Col span={14}>
                            <DatePicker style={{width: 300, marginBottom: 10, marginTop: -4}}
                                placeholder="请选择"
                                value={this.state.iss_time ? moment(this.state.iss_time, 'YYYY/MM/DD'):undefined}
                                onChange={(date,dateString)=>{
                                    this.setState({
                                        iss_time:dateString,
                                    });
                                }} />
                        </Col>
                        <Col span={6}><span>描述信息:</span></Col>
                        <Col span={14}>
                            <Input.TextArea rows={4} style={{width: 300, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({descr: e.target.value})}
                                value={this.state.descr}
                                placeholder="描述信息"/>
                        </Col>
                        <Col span={6}><span><span style={{color:'red'}}>*</span>预案文档:</span></Col>
                        <Col span={14}>
                            <UPpdatefire name="3" fileList={this.state.fileListfire} getUrl={e=>{
                                e[0] ? this.setState({
                                    doc_url:e[0].response && e[0].response.data,
                                    fileListfire:e,
                                }):this.setState({
                                    doc_url:'',
                                    fileListfire:[],
                                });
                            }}/>
                        </Col>
                    </Row>
                </Modal>
                <Modal
                    title={<span><Icon type="question-circle" style={{color:'#faad14',marginRight:20}} />是否启动应急预案,请填入启动条件!</span>}
                    visible={view_1}
                    width={600}
                    style={{top:20}}
                    confirmLoading={loading}
                    onOk={()=>{
                        // console.log(this.state.RadioAdd,this.state.CheckboxAdd,selectedRowKeys[0]);
                        if(!this.state.RadioAdd && this.state.CheckboxAdd.length === 0){
                            return message.error('请选择启动原因!!');
                        }
                        let arr = [];
                        this.state.CheckboxAdd && this.state.CheckboxAdd.map(item =>{
                            arr.push({
                                "value":item,
                            });
                        });
                        let body = {
                            "processDefinitionKey":"startPlan",
                            "businessKey":selectedRowKeys[0],
                            "variables": [
                                {
                                    "name": "startResson",
                                    "type": "string",
                                    "value": {"values":arr},
                                },
                                {
                                    "name": "startLevle",
                                    "type": "string",
                                    "value": {"values":[{"value":this.state.RadioAdd}]},
                                },
                            ],
                        };
                        this.props.dispatch({type:'emplan/postWorking',payload:body});
                    }}
                    onCancel={()=>{
                        this.setState({view_1:false});
                        dispatch({type:"emplan/save",payload:{getEmergListData:null}});
                    }}>
                    <div
                        style={{marginRight: -10}}>
                        <p>预警启动标准(单选)</p>
                        <div style={{marginLeft: 50}}>
                            <RadioGroup onChange={e => {
                                this.setState({RadioAdd:e.target.value});
                            }} name="radiogroup" defaultValue={1}>
                                <Row>
                                    <Col span={24}>
                                        {
                                            arrOne.map(item => {
                                                return <Radio key={item.id} value={ item.grades + ":" + item.content}>
                                                    {item.grades}
                                                    <div className={styles.div_span}>{item.content}</div>
                                                </Radio>;
                                            })
                                        }
                                    </Col>
                                </Row>
                            </RadioGroup>
                        </div>
                        <p>预警内容(多选)</p>
                        <div style={{marginLeft: 50}}>
                            <CheckboxGroup onChange={(value) => {
                                this.setState({CheckboxAdd:value});
                            }}>
                                <Row>
                                    <Col span={24}>
                                        {
                                            arrTow.map(item => {
                                                return <Checkbox style={{margin:5}} key={item.id} value={item.content}>
                                                    {item.content}
                                                </Checkbox>;
                                            })
                                        }
                                    </Col>
                                </Row>
                            </CheckboxGroup>
                        </div>
                    </div>
                </Modal>
            </div>
        );
    }

    componentWillReceiveProps (nextProps) {
        if (nextProps.record.id !== this.props.record.id) {
            let {department_id,doc_url,off_no,pre_name,pre_scope,pre_type,pre_version,user_id,iss_time,descr} = nextProps.record;
            this.setState({
                department_id: department_id,
                doc_url :doc_url,
                off_no:off_no,
                pre_nameADD:pre_name,
                pre_scope:pre_scope,
                pre_typeADD:pre_type,
                pre_version:pre_version,
                iss_time:iss_time,
                user_id:user_id,
                descr:descr,
            });
        }
        if(nextProps.pages !== this.props.pages) {
            let {pre_name, pre_type} = this.state;
            this.props.dispatch({
                type: "emplan/getEmplan", payload: {
                    pre_name: pre_name,
                    pre_type: pre_type,
                    pageNumber: nextProps.pages == 0 ? 1 : nextProps.pages,
                    pageSize: 10,
                },
            });
        }
        if ((nextProps.getEmergListData && nextProps.arrOneView)) {
            let arrOne = [], arrTow = [];
            arrOne = nextProps.getEmergListData[0].warnstartUpInfo;
            arrTow = nextProps.getEmergListData[0].warnInfo;
            this.setState({
                view_1:true,
                arrOne:arrOne,
                arrTow:arrTow,
            });
        }
        if(nextProps.view_1){
            this.setState({
                view_1: false,
            });
            this.props.dispatch({type: "emplan/save", payload: {view_1:false}});
        }
    }

    // componentWillUnmount() {
    //     clearTimeout(this.timeoutId)
    // }
}

Pages.propTypes = {
    emplan: PropTypes.object,
    loading: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect(({ emplan, loading }) => ({ emplan, loading }))(Pages);
